<template>
	<view>
		<!-- 主体 -->
		<view class="page page-bottom-bar hotel-orders" style="padding-bottom: 0;">
			<!-- 筛选 -->
			<view class="filter-bar flex-row-between">
				<block v-for="(item, index) in filterBar" :key="index">
					<view class="item" :class="{'active' : filterCurrent == item.id}" @click="filterList(item.id)">{{item.title}}</view>
				</block>
			</view>
			<!-- 列表 -->
			<LoadMore ref="LoadMore" id="LoadMore" :token="true" :diffHeight="202" :initData="initData" @dataRefresh='dataRefresh' @infoRefresh='infoRefresh'>
				<view class="order-list">
					<block v-for="(item, index) in dataList" :key="index">
						<view class="item box-shadow">
							<view class="part1 font13 flex-row-between">
								<view>订单号：{{item.crsNo}}</view>
								<view class="font-assist">{{item.msg}}</view>
							</view>
							<view class="part2 flex-row-start">
								<view class="image bg-cover" :style="{backgroundImage: 'url(' + (imgPath + item.order_info.img) + ')'}"></view>
								<view class="info flex-column-between">
									<view class="font14">{{item.order_info.hotel_name}}</view>
									<view class="font12 font-969696 flex-row-between">
										<view>{{item.order_info.room_name}} x{{item.order_info.rmnum}}  {{item.order_info.breakfast}}</view>
										<view>{{item.order_info.username}} 共{{item.order_info.daycount}}晚</view>
									</view>
									<view class="font12 font-969696 flex-row-between">
										<view>入：{{item.order_info.arr}}</view>
										<view>离：{{item.order_info.dep}}</view>
									</view>
								</view>
							</view>
							<view class="part3 font11 flex-row-end">
								订单金额：<text class="font15">￥{{item.price}}</text>（{{item.order_info.type}}）
							</view>
							<!-- end=已评论(结束);normal=已结算;pay=已付款;hidden=未付款;cancel=已取消 -->
							<view class="part4 flex-row-end">
								<view v-if="item.flag == 'normal' && item.channel != 'YHHD'" class="btn" @click="cancel(item.id)">申请撤销</view>
								<view v-if="item.flag == 'end' || item.flag == 'cancel'" class="btn" @click="goNext('/pages/xieyi/hotelList')">继续预订</view>
							</view>
						</view>
					</block>
				</view>
			</LoadMore>
		</view>
		<!-- 底部菜单 -->
		<XieyiTabBar :selected="1" id="tabBar"></XieyiTabBar>
	</view>
</template>

<script>
	import XieyiTabBar from '@/components/j-XieyiTabBar/index.vue';
	import LoadMore from "@/components/j-loadMore/index.vue";
	export default {
		components: { XieyiTabBar, LoadMore },
		data() {
			return {
				imgPath: this.$Config.http_static, // 图片头
				filterBar: [
					{ id: '', title: '全部'},
					{ id: 'pay', title: '已预订'},
					{ id: 'normal', title: '待评论'},
					{ id: 'end', title: '已完成'},
					{ id: 'cancel', title: '已取消'}
				],
				filterCurrent: '', // 高亮的id
				dataList: [],
				// 传参数据
				initData: {
					url: 'myhotelOrder',
					param: {
						status: ''
					}
				},
				time: null, // 申请撤销的截止时间（比如当天的20:00:00）
			}
		},
		onLoad() {
		},
		onShow: function() {
			// 隐藏默认菜单
			uni.hideTabBar()
		},
		methods: {
			// 筛选列表
			filterList (id) {
				this.filterCurrent = id
				this.initData.param.status = id
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			// LoadMore返回列表数据
			dataRefresh(e){
				this.dataList = e
			},
			// LoadMore返回信息数据
			infoRefresh(e){
				this.time = e.time
			},
			// 取消订单
			cancel (id) {
				let that = this
				
				let arr = this.time.split(':');
				let todayYear = (new Date()).getFullYear();
				let todayMonth = (new Date()).getMonth();
				let todayDay = (new Date()).getDate();
				let time1 = (new Date(todayYear, todayMonth, todayDay, arr[0], arr[1], arr[2])).getTime(); // 当天指定的时间戳
				let time2 = new Date().getTime(); // 系统当前时间戳
				
				if (time2 > time1) {
					uni.showToast({ title: '撤单截止时间是' + this.time, icon: 'none' })
				} else {
					uni.showModal({
						title: '订单撤销',
						confirmText: '确定',
						confirmColor: '#03004c',
						cancelText: '取消',
						content: '您确认要撤销该订单吗？',
						success: function(res) {
							if (res.confirm) {
								that.$Http({
									url: 'cancelhotelOrder',
									token: true,
									data: { order_id: id },
								}).then(res => {
									if (res.code == 1) {
										that.$refs.LoadMore.oncutRefresh(that.initData)
									} else {
										uni.showToast({  title: res.msg, icon: 'none' });
									}
								});
							}
						}
					});
				}
			},
			// 路由跳转: tag默认false,tag=true跳到tabBar页面
			goNext (url, tag) {
				if (tag) {
					uni.switchTab({ url: url });
				} else {
					uni.navigateTo({ url: url });
				}
			}
		}
	}
</script>

<style lang="less">
	@import '@/common/css/variables.less';
	/* 酒店订单列表 */
	.hotel-orders{
		background-color: #f5f5f5;padding-bottom: 0;
		.filter-bar{margin-bottom: 0;}
		.order-list{
			padding-top: 22rpx;
			.box-shadow{width:700rpx;margin: 0 auto 22rpx;border-radius: 10rpx; box-shadow: 0 0 16rpx rgba(205,205,205,.05);background-color: #fff;overflow: hidden;}
			.part1{padding: 28rpx 20rpx;line-height: 26rpx;}
			.part2{
				padding: 10rpx 20rpx 18rpx;
				.image{
					width: 150rpx;height: 150rpx;border-radius: 10rpx;background-color: #f5f5f5;
					.tag{width: 76rpx;line-height: 32rpx;font-size: 18rpx;border-radius: 10rpx 0 10rpx 0;background-color: @theme-color;color: #fff;text-align: center;}
				}
				.info{width: calc(100% - 150rpx); height: 150rpx;padding-left: 16rpx; }
			}
			.part3{ padding: 20rpx 20rpx 30rpx;line-height: 30rpx;}
			.part4{
				padding: 0 20rpx 30rpx;
				.btn{width: 150rpx;height: 50rpx;line-height: 46rpx;text-align: center; border: 2rpx solid #c8c8c8;border-radius: 26rpx;font-size: 24rpx;color: #646464;}
			}
			.part5{
				height: 80rpx;border-top: 2rpx solid #f5f5f5; padding: 20rpx;background-color: #fff9f6;
				.swiper{
					height: 38rpx;line-height: 38rpx;
					.swiper-item{
						.text{height: 38rpx;flex: 1;font-size: 26rpx;padding-right: 20rpx;}
						.btn{min-width: 70rpx;line-height: 38rpx;text-align: center;padding: 0 12rpx;font-size: 24rpx;color: #fff; background-color: @theme-color;border-radius: 5rpx;}
					}
				}
			}
		}
	}
</style>
